<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<%@ include file="/common/hallimport.jsp" %>
<link href="${ctx}/css/hall.css" rel="stylesheet">
<link href="${ctx}/css/web_style.css" rel="stylesheet">
<script src="${ctx}/js/web/tab.js"></script>
<script src="${ctx}/js/hall.js"></script>
<script src="${ctx}/js/highCharts.js"></script>
<style>
    #hall{height:400px;color:#fff;padding:8px;background:#001a4a;position:absolute;top:0;left:0;width:100%;z-index:1000;}
	#hall h2{padding-bottom:8px;}
	#lastValue{font-size:20px;color:#ff6600;font-weight:bold;}
	.zbxlogo{font-size:20px; font-weight:bold;padding-bottom:13px;}
	.item_info{height:140px;padding:0 15px;}
	.pricelist{height:270px;padding:0 15px;}
	.info_jkt{background:#04286b;width:100%;}
	.info_jkt th{padding:6px;line-height:23px;}
	.info_jkt td{padding:5px;line-height:20px;}
	.info_jkt td{background:#04286b; text-align:left;color:#fff;}
	.info_jkt th{text-align:center; color:#fff; font-weight:bold; verticle-align:middle; background:#00102d;white-space:nowrap;}
	#itemPic{border:5px solid #3067aa;height:325px; width:350px;}
	#itemPic li{background-size:350px 325px;height:325px; width:350px;}
</style>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<title>监控台</title>
</head>
<body>
<div style="width:100%;height:400px;color:#fff;padding:8px;background:#001a4a;positon:relative;">
<div style="width:100%;height:400px;background:url(/images/jktbg.png) center no-repeat #001a4a"></div>
<div id="hall" style="display:none;">
	<table>
		<tr><td colspan="2" class="zbxlogo"><img src="#"/>xxxxx有限公司</td>
		<td></td>
		</tr>
    	<tr>
    		<td style="vertical-align:top;" ><ul id="itemPic"/></ul></td>
     		<td  style="vertical-align:top;">
			     <div class="item_info">
			      <h2 id="itemName"></h2>
			      <h3>当前价格：<span id="lastValue"></span> <span id="item_priceUnit">${item.priceUnit}/${item.currency}</span></h3>
			      <h3>起始价格：<span id="firstValue"></span> <span id="item_firstValue">${item.priceUnit}/${item.currency}</span></h3>
			      <h3>报价时间：<span id="lastBidTime"></span></h3>
			      <h3>剩余时间：<span id="spareTime"></span></h3>
			      </div>
                <div class="pricelist">
			    <table id="info_table" class="info_jkt" cellspacing="1" cellpadding="0">
			      <tr>
			        <th>报价人</th>
			        <th>报价价格</th>
			        <th>报价时间</th>
			      </tr>
			    </table>
		    	<script type="text/template" id="info_html">
				<? for ( var i = 0; i < rows.length; i++) {?>
					<tr>
					<td><?=rows[i].userName?></td>
					<td><?=rows[i].bidValue?></td>
					<td><?=rows[i].bidTime.substring(0,19)?></td>
					</tr>
				<?}?>  		
			</script> 
			</div>
  </td>
  
  <td>
	 <div id="container" style="min-width: 430px; height: 330px; max-width: 430px; margin: 0 auto"></div>
  </td>
  </tr></table>
</div>
</div>

	<!-- 搜索结束 -->
<div style="padding:0 15px;height:200px;background:#fff;overflow:scroll;">
  <div class="searchForm" style="padding:5px 0">	
	<form id="runningList_form">
		<input type="hidden" name="page"  value="1">
		<input type="hidden" name="rows"  value="9" id="rows">
		<input type="hidden" name="direction"  value="F">
		<input type="hidden" name="bidMode"  value="2">
		<input type="hidden" name="methodKey"  value="itemList">
		<input type="hidden" name="tag"  value="table" id="tag">
		<select name="itemStatus">
		<option value="2">所有状态</option>
		<option value="B">自由报价期</option>
		<option value="C">限时报价期</option>
		</select>
		<input type="text" name="itemName"  value=""  tip="标的名称" placeholder="标的名称" /><a class="searchbtn" iconCls="icon-search" onclick="runningListSearch();">查询</a>
	</form>
	</div>
	 <table id="runningList_table" class="info" cellspacing="1" cellpadding="0">
		<tr class='active' id="title2" >
			<th width='25%'>标的名称</th>
			<th width='9%'>竞价方式</th>
			<th width='8%'>起始价格</th>
			<th width='8%'>当前价格</th>	
			<th width='8%'>报价次数</th>
			<th width='8%'>最高报价人</th>
			<th width='10%'>竞价状态</th>
			<th width='14%'>剩余时间</th>		
		</tr>
	</table>

	<div id="runningList_page" class="web_pages"></div>
</div>
	<script type="text/template" id="runningList_table_html">
	<? for ( var i = 0; i < rows.length; i++) {?>
		<tr id=item_<?=rows[i].itemId?>>
			<td class="td_left pl5px">
				<input type=hidden name="ids" value=<?=rows[i].itemId?> >
				<a onclick="gotohall('<?=rows[i].itemId?>');"><?=rows[i].itemName?></a>
			</td>
			<td><?=bidModeText(rows[i].bidMode)?></td>
			<td class="td_right"><?=rows[i].firstValuePre?></td>
			<td class="td_right" id=value_<?=rows[i].itemId?>>------</td>
			<td id=num_<?=rows[i].itemId?>>------</td>
			<td id=user_<?=rows[i].itemId?>>------</td>
			<td id=status_<?=rows[i].itemId?>>------</td>
			<td id=sptime_<?=rows[i].itemId?>>------</td>
		</tr>
	<?}?>  		
	</script>
</body>
</html>

<script>

bidMode=1;
//查询提交
function runningListSearch(){
	searchSubmit("hall","runningList");
}

//初始化加载
$(function(){
	//加载分页列表
	runningListSearch();
	//myLoad();
	setInterval(myLoad,3000);
});
var Highcharts;
$(function () {
theme();
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
drawIt('container');

});

ifchart="T";
</script>

